import { useRef } from "react"
import totalImg from "../../assets/total.png"
import fixImg from "../../assets/fix.png"
import * as echarts from "echarts"

import { useEffect } from "react"

// const calcInterval = (list) => {
//   const max = Math.max(...list);
//   const min = Math.min(...list);
//   const interval = (max - min) / 4;
//   return Math.floor(interval)
//   if(interval <= 10 && interval > 1) {
//     return 10
//   }

//   if(interval <= 20 && interval > 10) {
//     return 15
//   }

//   if(interval <= 50 && interval > 20) {
//     return 30
//   }
//   if(interval <= 100 && interval > 50) {
//     return 100
//   }
// }

const option1 = (dataX = [], dataY = []) => ({
  tooltip: {
    trigger: "item"
  },
  title: {
    text: "主营业务收入（亿元）",
    textStyle: {
      color: "#386EE9", // 标题颜色
      fontSize: 14, // 字体大小
      fontWeight: "bold", // 字体粗细
      fontFamily: "Arial" // 字体类型
    },
    left: 0, // 水平位置
    top: 0 // 垂直位置
  },
  grid: {
    top: "30%",
    left: "10%",
    right: "2%",
    bottom: "16%"
  },
  xAxis: {
    type: "category",
    data: dataX,
    axisTick: {
      alignWithLabel: true,
      show: false
    }
  },
  yAxis: {
    type: "value",
    // interval: 10,
    splitNumber: 2,

    min: Math.min(...dataY), // - 10 < 0 ? 0 : Math.min(...dataY) - 10,
    label: {
      show: true,
      textStyle: {
        color: "#999"
      }
    }
  },
  series: [
    {
      data: dataY,
      type: "line",
      symbolSize: 10,
      itemStyle: {
        color: "#1E5EF8",
        borderColor: "#1E5EF8",
        borderWidth: 2
      },
      lineStyle: {
        color: "#1E5EF8",
        width: 3,
        type: "solid"
      }
    }
  ]
})

const option2 = (dataX = [], dataY = []) => ({
  tooltip: {
    trigger: "item"
  },
  title: {
    text: "售电量",
    textStyle: {
      color: "#386EE9", // 标题颜色
      fontSize: 14, // 字体大小
      fontWeight: "bold", // 字体粗细
      fontFamily: "Arial" // 字体类型
    },
    left: 0, // 水平位置
    top: 0 // 垂直位置
  },
  grid: {
    top: "30%",
    left: "16%",
    right: "2%",
    bottom: "16%"
  },
  xAxis: {
    type: "category",
    data: dataX,
    axisTick: {
      alignWithLabel: true,
      show: false
    }
  },
  yAxis: {
    type: "value",
    // min: 250,
    min: Math.min(...dataY),
    splitNumber: 2,
    label: {
      show: true,
      textStyle: {
        color: "#999"
      }
    }
  },
  series: [
    {
      data: dataY,
      type: "line",
      symbolSize: 10,
      itemStyle: {
        color: "#04971F",
        borderColor: "#04971F",
        borderWidth: 2
      },
      lineStyle: {
        color: "#04971F",
        width: 3,
        type: "solid"
      }
    }
  ]
})

const option3 = (dataX = [], dataY = []) => ({
  tooltip: {
    trigger: "item"
  },
  title: {
    text: "综合线损率",
    textStyle: {
      color: "#386EE9", // 标题颜色
      fontSize: 14, // 字体大小
      fontWeight: "bold", // 字体粗细
      fontFamily: "Arial" // 字体类型
    },
    left: 0, // 水平位置
    top: 0 // 垂直位置
  },
  grid: {
    top: "30%",
    left: "16%",
    right: "2%",
    bottom: "16%"
  },
  xAxis: {
    type: "category",
    data: dataX,
    axisTick: {
      alignWithLabel: true,
      show: false
    }
  },
  yAxis: {
    type: "value",
    min: Math.min(...dataY),
    // min: 1,
    // max: 2,
    splitNumber: 2,
    label: {
      show: true,
      textStyle: {
        color: "#999"
      }
    }
  },
  series: [
    {
      data: dataY,
      type: "line",
      symbolSize: 10,
      itemStyle: {
        color: "#F88F1E",
        borderColor: "#F88F1E",
        borderWidth: 2
      },
      lineStyle: {
        color: "#F88F1E",
        width: 3,
        type: "solid"
      }
    }
  ]
})

const Business = ({ className, companyData = {}, businessTrends = {} }) => {
  const { totalAssets = 0, fixedAssets = 0 } = companyData
  const { assets = [], profit = [], revenue = [], years = [] } = businessTrends

  // console.log("businessTrends", businessTrends)

  // 总收入
  const revenueChart = useRef()
  const myRevenueChart = useRef(null)
  useEffect(() => {
    if (revenueChart.current) {
      if (!myRevenueChart.current) {
        myRevenueChart.current = echarts.init(revenueChart.current)
      }
      myRevenueChart.current.setOption(option1(years, revenue))
    }
  }, [revenue, years])

  // 利润
  const profitChart = useRef()
  const myProfitChart = useRef(null)
  useEffect(() => {
    if (profitChart.current) {
      if (!myProfitChart.current) {
        myProfitChart.current = echarts.init(profitChart.current)
      }
      myProfitChart.current.setOption(option2(years, assets))
    }
  }, [assets, years])

  // 资产
  const assetChart = useRef()
  const myAssetChart = useRef(null)
  useEffect(() => {
    if (assetChart.current) {
      if (!myAssetChart.current) {
        myAssetChart.current = echarts.init(assetChart.current)
      }
      myAssetChart.current.setOption(option3(years, profit))
    }
  }, [profit, years])

  return (
    <div className={className}>
      <h3 className="text-lg font-bold mb-1">经营情况</h3>
      <div className="flex">
        <div className="flex flex-1">
          <div
            className="w-[60px] h-[60px]"
            style={{
              backgroundImage: `url(${totalImg})`,
              backgroundSize: "200%",
              backgroundPosition: "center"
            }}
          ></div>
          <div>
            <div className="text-lg">
              <span className="text-blue-600 font-bold mr-1">
                {totalAssets}
              </span>
              亿元
            </div>
            <div className="text-sm">资产总额</div>
          </div>
        </div>
        <div className="flex flex-1">
          <div
            className="w-[60px] h-[60px]"
            style={{
              backgroundImage: `url(${fixImg})`,
              backgroundSize: "200%",
              backgroundPosition: "center"
            }}
          ></div>
          <div>
            <div className="text-lg">
              <span className="text-blue-600 font-bold mr-1">
                {fixedAssets}
              </span>
              亿元
            </div>
            <div className="text-sm">固定资产</div>
          </div>
        </div>
      </div>
      <div ref={revenueChart} className="w-full h-[120px]"></div>
      <div className="flex mt-2">
        <div ref={profitChart} className="w-1/2 h-[120px]"></div>
        <div ref={assetChart} className="w-1/2 h-[120px]"></div>
      </div>
    </div>
  )
}

export default Business
